<template>
  <div class="employees-page">
    <el-card>
      <template #header>
        <div class="page-header">
          <h3>员工信息管理</h3>
          <div class="header-actions">
            <el-button type="primary" @click="showAddDialog">
              <el-icon><Plus /></el-icon>
              新增员工
            </el-button>
            <el-button @click="showImportDialog = true">
              <el-icon><Upload /></el-icon>
              批量导入
            </el-button>
            <el-button @click="handleExport">
              <el-icon><Download /></el-icon>
              导出数据
            </el-button>
          </div>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :model="searchForm" inline class="search-form">
        <el-form-item label="员工姓名">
          <el-input v-model="searchForm.name" placeholder="请输入员工姓名" clearable />
        </el-form-item>
        <el-form-item label="工号">
          <el-input v-model="searchForm.code" placeholder="请输入工号" clearable />
        </el-form-item>
        <el-form-item label="部门">
          <el-select v-model="searchForm.department" placeholder="请选择部门" clearable>
            <el-option label="技术部" value="tech" />
            <el-option label="销售部" value="sales" />
            <el-option label="财务部" value="finance" />
            <el-option label="人事部" value="hr" />
          </el-select>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="searchForm.position" placeholder="请选择职位" clearable>
            <el-option label="总监" value="director" />
            <el-option label="经理" value="manager" />
            <el-option label="主管" value="supervisor" />
            <el-option label="专员" value="specialist" />
          </el-select>
        </el-form-item>
        <el-form-item label="在职状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态" clearable>
            <el-option label="在职" value="active" />
            <el-option label="离职" value="inactive" />
            <el-option label="试用期" value="probation" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 员工列表 -->
      <el-table :data="tableData" border stripe v-loading="loading">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="code" label="工号" width="120" />
        <el-table-column label="员工信息" width="200">
          <template #default="{ row }">
            <div class="employee-info">
              <el-avatar :size="40" :src="row.avatar" />
              <div class="info-text">
                <div class="name">{{ row.name }}</div>
                <div class="phone">{{ row.phone }}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="department" label="部门" width="120" />
        <el-table-column prop="position" label="职位" width="120" />
        <el-table-column prop="level" label="职级" width="100" />
        <el-table-column prop="joinDate" label="入职日期" width="120" />
        <el-table-column prop="workYears" label="司龄" width="80">
          <template #default="{ row }">
            {{ row.workYears }}年
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ getStatusText(row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="salary" label="基本薪资" width="120">
          <template #default="{ row }">
            ¥{{ formatNumber(row.salary) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleView(row)">详情</el-button>
            <el-button type="success" size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        class="pagination"
      />
    </el-card>

    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="800px"
      @close="resetForm"
    >
      <el-form :model="employeeForm" :rules="formRules" ref="formRef" label-width="120px">
        <el-tabs v-model="activeTab">
          <!-- 基本信息 -->
          <el-tab-pane label="基本信息" name="basic">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="工号" prop="code">
                  <el-input v-model="employeeForm.code" placeholder="请输入工号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="employeeForm.name" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="employeeForm.gender">
                    <el-radio label="male">男</el-radio>
                    <el-radio label="female">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birthday">
                  <el-date-picker
                    v-model="employeeForm.birthday"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="身份证号" prop="idCard">
                  <el-input v-model="employeeForm.idCard" placeholder="请输入身份证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="employeeForm.phone" placeholder="请输入手机号码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="employeeForm.email" placeholder="请输入邮箱" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="婚姻状况" prop="maritalStatus">
                  <el-select v-model="employeeForm.maritalStatus" placeholder="请选择" style="width: 100%">
                    <el-option label="未婚" value="single" />
                    <el-option label="已婚" value="married" />
                    <el-option label="离异" value="divorced" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="现居住地址" prop="address">
                  <el-input v-model="employeeForm.address" placeholder="请输入现居住地址" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!-- 工作信息 -->
          <el-tab-pane label="工作信息" name="work">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="部门" prop="department">
                  <el-select v-model="employeeForm.department" placeholder="请选择部门" style="width: 100%">
                    <el-option label="技术部" value="tech" />
                    <el-option label="销售部" value="sales" />
                    <el-option label="财务部" value="finance" />
                    <el-option label="人事部" value="hr" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职位" prop="position">
                  <el-select v-model="employeeForm.position" placeholder="请选择职位" style="width: 100%">
                    <el-option label="总监" value="director" />
                    <el-option label="经理" value="manager" />
                    <el-option label="主管" value="supervisor" />
                    <el-option label="专员" value="specialist" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="职级" prop="level">
                  <el-select v-model="employeeForm.level" placeholder="请选择职级" style="width: 100%">
                    <el-option label="P1" value="P1" />
                    <el-option label="P2" value="P2" />
                    <el-option label="P3" value="P3" />
                    <el-option label="P4" value="P4" />
                    <el-option label="P5" value="P5" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="直属上级" prop="manager">
                  <el-select v-model="employeeForm.manager" placeholder="请选择直属上级" style="width: 100%">
                    <el-option label="张三" value="zhangsan" />
                    <el-option label="李四" value="lisi" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入职日期" prop="joinDate">
                  <el-date-picker
                    v-model="employeeForm.joinDate"
                    type="date"
                    placeholder="选择日期"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="员工状态" prop="status">
                  <el-select v-model="employeeForm.status" placeholder="请选择状态" style="width: 100%">
                    <el-option label="在职" value="active" />
                    <el-option label="离职" value="inactive" />
                    <el-option label="试用期" value="probation" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工作地点" prop="workLocation">
                  <el-input v-model="employeeForm.workLocation" placeholder="请输入工作地点" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同类型" prop="contractType">
                  <el-select v-model="employeeForm.contractType" placeholder="请选择合同类型" style="width: 100%">
                    <el-option label="劳动合同" value="labor" />
                    <el-option label="劳务合同" value="service" />
                    <el-option label="实习协议" value="intern" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!-- 薪资信息 -->
          <el-tab-pane label="薪资信息" name="salary">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="基本工资" prop="salary">
                  <el-input-number v-model="employeeForm.salary" :min="0" :step="100" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="绩效工资" prop="performanceSalary">
                  <el-input-number v-model="employeeForm.performanceSalary" :min="0" :step="100" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="岗位津贴" prop="allowance">
                  <el-input-number v-model="employeeForm.allowance" :min="0" :step="100" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工资发放日" prop="salaryDay">
                  <el-select v-model="employeeForm.salaryDay" placeholder="请选择" style="width: 100%">
                    <el-option v-for="day in 28" :key="day" :label="`每月${day}日`" :value="day" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="银行卡号" prop="bankCard">
                  <el-input v-model="employeeForm.bankCard" placeholder="请输入银行卡号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="开户银行" prop="bankName">
                  <el-input v-model="employeeForm.bankName" placeholder="请输入开户银行" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>

          <!-- 教育背景 -->
          <el-tab-pane label="教育背景" name="education">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="最高学历" prop="education">
                  <el-select v-model="employeeForm.education" placeholder="请选择学历" style="width: 100%">
                    <el-option label="高中" value="high" />
                    <el-option label="大专" value="college" />
                    <el-option label="本科" value="bachelor" />
                    <el-option label="硕士" value="master" />
                    <el-option label="博士" value="doctor" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="毕业院校" prop="school">
                  <el-input v-model="employeeForm.school" placeholder="请输入毕业院校" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业" prop="major">
                  <el-input v-model="employeeForm.major" placeholder="请输入专业" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="毕业时间" prop="graduationDate">
                  <el-date-picker
                    v-model="employeeForm.graduationDate"
                    type="month"
                    placeholder="选择月份"
                    format="YYYY-MM"
                    value-format="YYYY-MM"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确定</el-button>
      </template>
    </el-dialog>

    <!-- 员工详情对话框 -->
    <el-dialog v-model="viewDialogVisible" title="员工详情" width="900px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="工号">{{ viewData.code }}</el-descriptions-item>
        <el-descriptions-item label="姓名">{{ viewData.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ viewData.gender === 'male' ? '男' : '女' }}</el-descriptions-item>
        <el-descriptions-item label="出生日期">{{ viewData.birthday }}</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ viewData.phone }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ viewData.email }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ viewData.department }}</el-descriptions-item>
        <el-descriptions-item label="职位">{{ viewData.position }}</el-descriptions-item>
        <el-descriptions-item label="职级">{{ viewData.level }}</el-descriptions-item>
        <el-descriptions-item label="入职日期">{{ viewData.joinDate }}</el-descriptions-item>
        <el-descriptions-item label="司龄">{{ viewData.workYears }}年</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(viewData.status)">{{ getStatusText(viewData.status) }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="基本工资">¥{{ formatNumber(viewData.salary) }}</el-descriptions-item>
        <el-descriptions-item label="学历">{{ viewData.education }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 批量导入对话框 -->
    <el-dialog v-model="showImportDialog" title="批量导入员工" width="600px">
      <el-upload
        drag
        action="#"
        :auto-upload="false"
        :on-change="handleFileChange"
        accept=".xlsx,.xls"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            只能上传 xlsx/xls 文件，且不超过 5MB
          </div>
        </template>
      </el-upload>
      <template #footer>
        <el-button @click="showImportDialog = false">取消</el-button>
        <el-button type="primary" @click="confirmImport">确定导入</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const loading = ref(false)
const dialogVisible = ref(false)
const viewDialogVisible = ref(false)
const showImportDialog = ref(false)
const submitLoading = ref(false)
const dialogTitle = ref('新增员工')
const activeTab = ref('basic')
const formRef = ref(null)

// 搜索表单
const searchForm = reactive({
  name: '',
  code: '',
  department: '',
  position: '',
  status: ''
})

// 分页
const pagination = reactive({
  page: 1,
  size: 10,
  total: 100
})

// 员工表单
const employeeForm = reactive({
  code: '',
  name: '',
  gender: 'male',
  birthday: '',
  idCard: '',
  phone: '',
  email: '',
  maritalStatus: '',
  address: '',
  department: '',
  position: '',
  level: '',
  manager: '',
  joinDate: '',
  status: 'probation',
  workLocation: '',
  contractType: '',
  salary: 0,
  performanceSalary: 0,
  allowance: 0,
  salaryDay: 15,
  bankCard: '',
  bankName: '',
  education: '',
  school: '',
  major: '',
  graduationDate: ''
})

// 表单验证规则
const formRules = {
  code: [{ required: true, message: '请输入工号', trigger: 'blur' }],
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  position: [{ required: true, message: '请选择职位', trigger: 'change' }],
  joinDate: [{ required: true, message: '请选择入职日期', trigger: 'change' }]
}

// 表格数据
const tableData = ref([
  {
    id: 1,
    code: 'EMP001',
    name: '张三',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    phone: '13800138000',
    gender: 'male',
    birthday: '1990-01-15',
    department: '技术部',
    position: '技术总监',
    level: 'P5',
    joinDate: '2020-01-01',
    workYears: 4,
    status: 'active',
    salary: 25000,
    education: '本科'
  },
  {
    id: 2,
    code: 'EMP002',
    name: '李四',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
    phone: '13800138001',
    gender: 'female',
    birthday: '1992-05-20',
    department: '销售部',
    position: '销售经理',
    level: 'P4',
    joinDate: '2021-03-15',
    workYears: 3,
    status: 'active',
    salary: 18000,
    education: '硕士'
  }
])

const viewData = ref({})

// 方法
const getStatusType = (status) => {
  const map = {
    'active': 'success',
    'inactive': 'info',
    'probation': 'warning'
  }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = {
    'active': '在职',
    'inactive': '离职',
    'probation': '试用期'
  }
  return map[status] || status
}

const formatNumber = (value) => {
  return value.toLocaleString()
}

const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('查询成功')
  }, 1000)
}

const handleReset = () => {
  Object.assign(searchForm, {
    name: '',
    code: '',
    department: '',
    position: '',
    status: ''
  })
}

const showAddDialog = () => {
  dialogTitle.value = '新增员工'
  dialogVisible.value = true
}

const handleEdit = (row) => {
  dialogTitle.value = '编辑员工'
  Object.assign(employeeForm, row)
  dialogVisible.value = true
}

const handleView = (row) => {
  viewData.value = row
  viewDialogVisible.value = true
}

const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除该员工吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  })
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid) => {
    if (valid) {
      submitLoading.value = true
      
      setTimeout(() => {
        submitLoading.value = false
        dialogVisible.value = false
        ElMessage.success('保存成功')
      }, 1000)
    }
  })
}

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
  activeTab.value = 'basic'
}

const handleExport = () => {
  ElMessage.success('导出成功')
}

const handleFileChange = () => {
  console.log('File changed')
}

const confirmImport = () => {
  showImportDialog.value = false
  ElMessage.success('导入成功')
}

const handleSizeChange = (size) => {
  pagination.size = size
}

const handleCurrentChange = (page) => {
  pagination.page = page
}
</script>

<style scoped>
.employees-page {
  padding: 0;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.search-form {
  margin-bottom: 20px;
}

.employee-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.info-text {
  flex: 1;
}

.name {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  margin-bottom: 4px;
}

.phone {
  font-size: 12px;
  color: #909399;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
